<template>
  <div class="login">
    <el-card class="login_card">
      <el-image class="logo_image" :src="logo_url" fit="cover"></el-image>
      <p class="login_title">登陆</p>
      <p class="login_desc">进入黑子世界</p>
      <el-form ref="kunForm" :model="kunForm" :rules="rules">
        <el-form-item prop="kunUserName">
          <el-input
            placeholder="黑子账号"
            v-model="kunForm.kunUserName"
            prefix-icon="el-icon-basketball"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="kunPassWord">
          <el-input
            placeholder="黑子密码"
            type="password"
            v-model="kunForm.kunPassWord"
            prefix-icon="el-icon-refrigerator"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm('kunForm')"
            :loading="login_btn_loading"
            >点鸡登陆</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line
  name: "login",

  data() {
    return {
      // 登陆logo图片地址
      logo_url: require("@/assets/img/logo_image.png"),
      // loading btn
      login_btn_loading: false,
      // 登陆表单
      kunForm: {
        kunUserName: "",
        kunPassWord: "",
      },
      // 重定向路径
      redirect: undefined,
      // 路由携带参数
      otherQuery: {},
      // 表单验证规则
      rules: {
        kunUserName: [
          { required: true, message: "请露出你的鸡脚", trigger: "blur" },
        ],
        kunPassWord: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        const query = route.query;
        if (query) {
          this.redirect = query.redirect;
          this.otherQuery = this.getOtherQuery(query);
        }
      },
    },
  },
  mounted() {},

  methods: {
    // 登陆提交按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.login_btn_loading = true;
          // log in request use vuex to progress

          this.$router.push({
            path: this.redirect || "/home",
            query: this.otherQuery,
          });
          this.login_btn_loading = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 获取更多query
    getOtherQuery(query) {
      // 除开 redirect
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== "redirect") {
          acc[cur] = query[cur];
        }
        return acc;
      }, {});
    },
  },
};
</script>
<style lang="scss" scope>
.login {
  width: 100%;
  height: 100%;
  background-image: url("../assets/img/kunkunLogin.png");
  background-size: 100% 100%;
  /* 根标签绝对定位会脱离文档标准流、以浏览器窗口作为定位参照物 */
  position: absolute;
  top: 0;
  left: 0;
}

.login_card {
  position: absolute;
  width: 20%;
  min-width: 300px;
  height: 400px;
  min-height: 400px;
  text-align: center;
  border-radius: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.logo_image {
  width: 50px;
  height: 50px;
  animation: shake 3s ease infinite;
}

.login_title {
  font-size: 25px;
  font-weight: bold;
}

.login_desc {
  letter-spacing: 2px;
  color: #999a9a;
}
</style>
